<template>
  <div class="home-main">
    <!-- 头部nav -->
    <div class="nav">
      <span class="location" @click="goLocation">{{ address }}</span>
      <van-search placeholder="搜索商品" @click="onSearch" />
    </div>
    <!-- banner -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in homeBanner" :key="item.id">
        <img class="bannerImg" v-lazy="item.image_url" />
      </van-swipe-item>
    </van-swipe>
    <!-- channel -->
    <div class="channel">
      <div class="channelContent" v-for="item in channerIcon" :key="item.id">
        <img
          class="channelIcon"
          :src="item.icon_url"
          @click="goGoodsList(item.id)"
        />
        <div class="channelText">{{ item.name }}</div>
      </div>
    </div>
    <!-- 品牌制造商直供 -->
    <div class="brand">
      <div class="brandTitle" @click="goListaction">品牌制造商直供</div>
      <ul class="brandProduct">
        <li
          class="brandItem"
          v-for="item in brandList"
          :key="item.id"
          @click="goBrandDeatil(item.id)"
        >
          <img class="brandItemImg" :src="item.new_pic_url" alt="加载失败" />
          <div class="branddes">
            <div class="brandManufacturer">{{ item.name }}</div>
            <div class="brandPrice">{{ item.floor_price }}元起</div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 新品首发 -->
    <div class="newsProduct" @click="goNewsGoods('news')">
      <div class="newsProductTitle">新品首发</div>
      <div class="newsBtn">查看全部</div>
    </div>
    <!-- 新品首发,产品展示 -->
    <div class="newsGoods">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="item in newGoods" :key="item.id">
          <img class="newsGoodsImg" :src="item.list_pic_url"   @click="goGoods(item.id)"/>
          <div class="newsGoodsContent">
            <div class="newsGoodsName">{{ item.name }}</div>
            <div class="newsGoodsDes">{{ item.goods_brief }}</div>
            <div class="newsGoodsPrice">¥{{ item.retail_price }}</div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 人气推荐 -->
    <div class="hotRecommend" @click="goNewsGoods('hot')">
      <div class="hotRecommendTitle">人气推荐 ▪ 好物精选</div>
      <div class="hotRecommendBtn">查看全部</div>
    </div>
    <!-- 人气推荐商品展示 -->
    <div class="hotRecommendGoods">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide v-for="item in hotGoods" :key="item.id" >
          <img class="hotRecommendsImg" :src="item.list_pic_url" @click="goGoods(item.id)" />
          <div class="hotRecommendContent">
            <div class="hotRecommendName">{{ item.name }}</div>
            <div class="hotRecommendDes">{{ item.goods_brief }}</div>
            <div class="hotRecommendPrice">¥{{ item.retail_price }}</div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
    <!-- 专题精选 -->
    <div class="topicSelection">
      <div class="topicSelectionTitle">
        <span class="topicSelectionText">专题精选</span>
        <img class="topicSelectionIcon" src="../assets/images/right.png" alt />
      </div>
      <div class="topicSelectionGoods">
        <swiper ref="mySwiper" :options="swiperTopicOptions">
          <swiper-slide v-for="item in topicList" :key="item.id">
            <img
              class="topicSelectionImg"
              :src="item.item_pic_url"
              @click="goTopicDetail(item.id)"
            />
            <div class="topicSelectionContent">
              <div class="topicSelectionName">
                {{ item.title }}
                <span class="topicSelectionPrice"
                  >{{ item.price_info }}元起</span
                >
              </div>
              <div class="topicSelectionDes">{{ item.subtitle }}</div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <!-- 好物分享 -->
    <div class="newCategory" v-for="item in newCategoryList" :key="item.id">
      <div class="newCategoryTitle">{{ item.name }}好物</div>
      <div class="newCategoryGoods">
        <div
          class="newCategoryItem"
          v-for="itemList in item.goodsList"
          :key="itemList.id"
          @click="goGoods(itemList.id)"
        >
          <img class="newCategoryItemImg" :src="itemList.list_pic_url" alt />
          <div class="newCategoryItemdes">
            <div class="newCategoryItemName">{{ itemList.name }}</div>
            <div class="newCategoryItemPrice">¥{{ itemList.retail_price }}</div>
          </div>
        </div>
        <div class="newCategoryLast" @click="goGoodsList(item.id)">
          <div class="newCategoryIconText">{{ item.name }}好物</div>
          <img
            class="newCategoryIconImg"
            src="../assets/images/rightbig.png"
            alt
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
//重点：1.query的传参方式goNewsGoods（）
import Vue from "vue";
import { Search, Swipe, SwipeItem, Lazyload, Loading, Toast } from "vant";
import bus from "@/bus.js"; //兄弟传值
import homeApi from "@/api/home/index";

Vue.use(Search).use(Swipe).use(SwipeItem).use(Lazyload).use(Loading).use(Toast);
export default {
  name: "home",
  data() {
    return {
      address: "成都市",
      homeBanner: [],
      channerIcon: [],
      brandList: [],
      newGoods: [],
      hotGoods: [],
      topicList: [],
      newCategoryList: [],
      swiperOptions: {
        slidesPerView: 2.6,
        spaceBetween: 30,
      },
      swiperTopicOptions: {
        slidesPerView: 1.4,
        spaceBetween: 12,
      },
    };
  },
  created() {
    Toast.loading({
      message: "加载中...",
      forbidClick: true,
    });
    this.getHomeContent();
    
  },
  mounted() {
    bus.$on("location", (val) => {
      this.address = val;
    });
    
  },
  methods: {
    goLocation() {
      this.$router.push({ name: "map" });
    },
    onSearch() {
      this.$router.push({ name: "productSearch" });
    },
    getHomeContent() {
      homeApi.homeIndex().then((res) => {
        this.homeBanner = res.banner;
        this.channerIcon = res.channel;
        this.brandList = res.brandList;
        this.newGoods = res.newGoods;
        this.hotGoods = res.hotGoods;
        this.topicList = res.topicList;
        this.newCategoryList = res.newCategoryList;
      });
    },
    //跳转到channel
    goGoodsList(id) {
      this.$router.push({ name: "categoryList", params: { id } });
    },

    //跳转到品牌制造商详情内列表数据
    goListaction() {
      this.$router.push({ name: "homeListaction" });
    },

    // 品牌详情页
    goBrandDeatil(id) {
      this.$router.push({ name: "brandDetail", params: { id } });
    },
    //新品首发/人气推荐
    goNewsGoods(info) {
      if (info == "news") {
        this.$router.push({
          path: "/newsGoods?isNew=" + 1,
        });
      } else {
        this.$router.push({
          path: "/newsGoods?isHot=" + 1,
        });
      }
    },
    //专题详情页
    goTopicDetail(id) {
      this.$router.push({ name: "topicDetail", params: { id } });
    },
    //商品详情页
    goGoods(id){
      this.$router.push({name:'goods',params:{id}})
    }
  },
};
</script>

<style lang="scss" scoped>
.home-main {
  height: calc(100% - 100px);
  // height: 2000px;
  .nav {
    display: flex;
    justify-content: flex-start;
    height: 40px;
    background-color: #fff;
    .location {
      width: 60px;
      display: inline-block;
      line-height: 40px;
      text-align: center;
    }
    .van-search__content {
      background-color: #fff;
      padding-left: 0;
    }
  }
  .my-swipe .van-swipe-item {
    height: 200px;
    .bannerImg {
      height: 100%;
      width: 100%;
    }
  }
  ::v-deep .van-swipe__indicator {
    background-color: #aaabae;
    &.van-swipe__indicator--active {
      background-color: #000 !important;
    }
  }
  .channel {
    padding-top: 10px;
    padding-bottom: 20px;
    display: flex;
    justify-content: space-around;
    background-color: #fff;
    .channelContent {
      width: 30px;
      .channelIcon {
        width: 100%;
        height: 30px;
      }
      .channelText {
        padding-top: 6px;
        font-size: 12px;
        text-align: center;
      }
    }
  }
  .brand {
    margin-top: 8px;
    background-color: #fff;
    .brandTitle {
      font-size: 12px;
      padding: 20px 0;
      text-align: center;
    }
    .brandProduct {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      flex: 2;
      .brandItem {
        position: relative;
        width: 49%;
        height: 116px;
        margin-bottom: 4px;
        .brandItemImg {
          width: 100%;
          height: 100%;
        }
        .branddes {
          position: absolute;
          top: 15px;
          left: 5px;
          font-size: 12px;
          .brandPrice {
            padding-top: 10px;
          }
        }
      }
    }
  }
  .newsProduct,
  .hotRecommend {
    position: relative;
    height: 122px;
    text-align: center;
    color: #abb7c6;
    margin: 10px 0;
    background: url("../assets/images/bgnew.png") no-repeat center center;
    .newsProductTitle,
    .hotRecommendTitle {
      font-size: 16px;
      padding-top: 30px;
    }
    .newsBtn,
    .hotRecommendBtn {
      width: 90px;
      height: 24px;
      line-height: 24px;
      background-color: #d8e4f0;
      position: absolute;
      left: 50%;
      margin-left: -45px;
      margin-top: 10px;
    }
  }
  .newsGoods,
  .hotRecommendGoods,
  .topicSelectionGoods {
    background-color: #fff;
    .swiper-slide {
      margin-left: 8px;
      width: 140px;
      height: 230px;
      border-right: 1px solid #f4f4f4;
      .newsGoodsImg,
      .hotRecommendsImg,
      .topicSelectionImg {
        width: 100%;
        height: 140px;
      }
      .newsGoodsContent,
      .hotRecommendContent,
      .topicSelectionContent {
        margin-left: 8px;
        .newsGoodsName,
        .hotRecommendName,
        .topicSelectionName {
          position: relative;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 15px;
          font-weight: 700;
          .topicSelectionPrice {
            position: absolute;
            right: 3px;
            top: 0;
            font-size: 12px;
            color: $baseColor;
            margin-right: 5px;
            font-weight: 400;
          }
        }
        .newsGoodsDes,
        .hotRecommendDes,
        .topicSelectionDes {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #989795;
          margin: 10px 0;
        }
        .newsGoodsPrice,
        .hotRecommendPrice {
          color: $baseColor;
        }
      }
    }
  }
  .hotRecommend {
    color: #bdaf88;
    background: url("../assets/images/bgtopic.png") no-repeat center center;
    .hotRecommendBtn {
      background-color: #f4e9cb;
    }
  }
  .topicSelection {
    margin-top: 10px;
    background-color: #fff;
    .topicSelectionTitle {
      padding: 20px 0;
      text-align: center;
      .topicSelectionIcon {
        width: 14px;
        height: 14px;
        margin-left: 5px;
        vertical-align: middle;
      }
    }
    .topicSelectionGoods {
      .swiper-slide {
        border-right: none;
        .topicSelectionImg {
          border-radius: 10px;
        }
      }
    }
  }
  .newCategory {
    margin-bottom: 60px;
    .newCategoryTitle {
      margin: 15px 0;
      text-align: center;
    }
    .newCategoryGoods {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      .newCategoryItem,
      .newCategoryLast {
        position: relative;
        margin: 3px;
        width: 48%;
        height: 215px;
        background-color: #fff;
        .newCategoryItemImg {
          position: absolute;
          left: 50%;
          margin-left: -75px;
          width: 150px;
          height: 150px;
        }
        .newCategoryItemdes {
          text-align: center;
          margin-top: 160px;
          .newCategoryItemName {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .newCategoryItemPrice {
            padding-top: 12px;
            color: $baseColor;
          }
        }
      }
      .newCategoryLast {
        position: relative;
        .newCategoryIconText {
          text-align: center;
          position: absolute;
          height: 36px;
          top: 50%;
          width: 100%;
          margin-top: -30px;
          font-size: 16px;
        }
        .newCategoryIconImg {
          position: absolute;
          top: 50%;
          left: 50%;
          margin-left: -17.5px;
          margin-top: 5px;
          width: 35px;
          height: 35px;
        }
      }
    }
  }
}
</style>
